<template>
  <el-container>
    <el-header>
      <div class="headerLeft">
        <div>
          <img class="headerImg1" src="../../../static/img/icon_shouye_caidan.png"/>
          <img class="headerImg2" src="../../../static/img/LOGO.png"/>
          <p class="headerText">企业营销制作平台<p/>
        </div>
      </div>
      <div class="headerRight">
        <el-breadcrumb separator=" ">
          <el-breadcrumb-item :to="{ path: '/' }"><img class="headerImg" src="../../../static/img/icon_dinbu_sousuo.png"/>搜索</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/"><img class="headerImg" src="../../../static/img/icon_dinbu_xiangmu.png"/>项目</a></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }"><img class="headerImg" src="../../../static/img/icon_dinbu_wode.png"/>我的</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }"><img class="headerImg" src="../../../static/img/icon_dinbu_xiaoxi.png"/>消息</el-breadcrumb-item>
          <el-breadcrumb-item class="itemMargin" :to="{ path: '/' }"><img class="headerImg3" src="../../../static/img/shangchuan.png"/></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-header>
    <el-container>
      <el-aside width="380px">
        <el-row class="tac">
          <el-col :span="12">
            <div>
              <img src="../../../static/img/LOGO.png"/>
              <p>搞怪摄影师</p>
              <p>北京</p>
            </div>
            <el-menu>
              <el-menu-item index="1">
                <i><img src="../../../static/img/赞icon_zuoche_tuijian.png"/></i>
                <span slot="title">推荐dome</span>
              </el-menu-item>
              <el-menu-item index="2">
                <i><img src="../../../static/img/icon_zuoche_hangye.png"/></i>
                <span slot="title">行业资讯</span>
              </el-menu-item>
              <div>
                <el-menu-item index="3">
                  <i><img src="../../../static/img/icon_zuoche_rencai.png"/></i>
                  <span slot="title">人才招募</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <i><img src="../../../static/img/icon_zuoche_shebei.png"/></i>
                  <span slot="title">设备租赁</span>
                </el-menu-item>
                <el-menu-item index="5">
                  <i><img src="../../../static/img/icon_zuoche_changdi.png"/></i>
                  <span slot="title">场地提供</span>
                </el-menu-item>
              </div>
              <el-menu-item index="6">
                <i><img src="../../../static/img/icon_zuoche_shezhi.png"/></i>
                <span slot="title">设置</span>
              </el-menu-item>
              <el-menu-item index="7">
                <i><img src="../../../static/img/icon_zuoche_jianyi.png"/></i>
                <span slot="title">提交建议</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <div class="block">
          <el-carousel trigger="click" height="525px">
            <el-carousel-item v-for="item in data" :key="item">
              <img :src="item">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="block marginTop">
          <p class="more-left">推荐demo</p>
          <p class="more-right">查看更多</p>
          <div class="cleanFloat">
            <commonLayout v-for="item in data1"
                          :key="item.id"
                          :text="item.text"
                          :video="item.video"
            ></commonLayout>
          </div>
        </div>
        <div class="block marginTop">
          <p class="more-left">推荐demo</p>
          <p class="more-right">查看更多</p>
          <div class="cleanFloat">
            <commonLayout class="mobileReader"
            v-for="item in data2"
            :key="item.id"
            :text="item.text"
            :video="item.video"
            ></commonLayout>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { Button, Select } from 'element-ui'
import commonLayout from '@/components/commonLayout'
export default {
  name: 'HelloWorld',
  data () {
    return {
      data: [
        '../../../static/img/1.png',
        '../../../static/img/2.png',
        '../../../static/img/3.png'
      ],
      data1: [
        {text: '(预付款)预售【泰国金枕头榴莲】', price: '￥26.8', jiage: '￥32.8', id: '1', video: '../../../static/img/1.png'},
        {text: '秒杀【智利进口鸡心李】', price: '￥25.8', jiage: '￥32.8', id: '2', video: '../../../static/img/2.png'},
        {text: '【泰国金枕头榴莲】', price: '￥23111', jiage: '￥32.8', id: '3', video: '../../../static/img/3.png'},
        {text: '【泰国金枕头榴莲】', price: '￥2313.8', jiage: '￥32.8', id: '4', video: '../../../static/img/4.jpg'},
        {text: '【泰国金枕头榴莲】', price: '￥24238', jiage: '￥32.8', id: '5', video: '../../../static/img/5.jpg'}
      ],
      data2: [
        {text: '(预付款)预售【泰国金枕头榴莲】', price: '￥26.8', jiage: '￥32.8', id: '1', video: '../../../static/img/6.jpg'},
        {text: '秒杀【智利进口鸡心李】', price: '￥25.8', jiage: '￥32.8', id: '2', video: '../../../static/img/7.jpg'},
        {text: '【泰国金枕头榴莲】', price: '￥23111', jiage: '￥32.8', id: '3', video: '../../../static/img/8.jpg'},
        {text: '【泰国金枕头榴莲】', price: '￥2313.8', jiage: '￥32.8', id: '4', video: '../../../static/img/10.jpg'},
        {text: '【泰国金枕头榴莲】', price: '￥24238', jiage: '￥32.8', id: '5', video: '../../../static/img/11.jpg'}
      ]
    }
  },
  components: {
    Button,
    Select,
    commonLayout
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-header, .el-footer {
    height: 80px!important;
    line-height: 80px;
  }
  .headerLeft {
    width: 50%;
    float:left;
    line-height: 80px;
    height: 80px;
  }
  .headerLeft > div {
    position:relative;
    width: 100%;
    left: 0;
    height: 100%;
  }
  .headerImg1 {
    position:absolute;
    top: 10px;
    left: 5%;
    /*width: 4%;*/
  }
  .headerImg2 {
    position:absolute;
    left: 18%;
    bootom: 15px;
    /*width: 19%;*/
  }
  .headerText {
    font-size: 16px;
    color: #888888;
    position:absolute;
    left: 40%;
    /*width: 20%;*/
    bottom:0px;
  }
  .headerRight {
    width: 50%;
    float:right;
    line-height: 70px;
    height: 80px;
  }
  .el-breadcrumb {
    float:right;
    line-height: 70px;
    height: 80px;
  }
  .el-breadcrumb {
    line-height: 80px!important;
    height: 80px;
    display: table-cell;
    vertical-align: middle;
  }
  .el-breadcrumb__item {
    display: table-cell;
    vertical-align: middle;
    margin-right: 35px;
  }
  .itemMargin {
    margin-right: 0!important;
  }
  .headerImg {
    position:relative;
    top:5px;
    right: 11px;
  }
  .headerImg3 {
    position:relative;
    top:15px;
    right: 11px;
  }
  .block > .more-left {
    font-size: 46px;
    color: #333333;
    float: left;
    margin: auto;
  }
  .block > .more-right {
    float: right;
    font-size: 20px;
    width: 160px;
    background-color: #0096f2;
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    border-radius:25px;
  }
  .block-title {
    margin-bottom: 500px;
  }
  .cleanFloat{
    width:98%;
    overflow:hidden;  /* 清楚浮动 */
  }
  .marginTop {
    margin-top: 80px;
  }
</style>
